<!-- 菜单管理 -->
<template>
	<div class="bg-ff commonality">
		<div class="main-child-toggle">
			<div :class="{'show-permission-item': showPermissionItem}" class="main-child-toggle-wrapper flex-row">
				<!-- 菜单列表 -->
				<menus @menuClick="menuClick" @resetPermission="resetPermission" class="w50"></menus>
				<!-- 菜单权限 -->
				<el-card class="box-card w50">
					<div class="fz-18" slot="header">
						<svg-icon @click="showPermissionItem = false" class="back-icon" icon-class="返回" />
						<span>{{menuName}}</span>
					</div>
					<permission ref="routingPermission" type="1"></permission>
					<permission ref="buttonPermission" type="2"></permission>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
import Menus from './components/Menu'
import Permission from './components/Permission'

export default {
  name: 'index',
  components: {
    Menus,
    Permission
  },
  data() {
    return {
      showPermissionItem: false,
      menuName: ''
    }
  },
  methods: {
    menuClick(row) {
      this.menuName = `【${row.name}】权限`
      this.$refs.routingPermission.menuClick(row)
      this.$refs.buttonPermission.menuClick(row)
      this.showPermissionItem = true
    },
    resetPermission() {
      this.menuName = undefined
      this.$refs.routingPermission.resetPermission()
      this.$refs.buttonPermission.resetPermission()
    }
  }
}
</script>
